<template>
  <div class="ariticle-detail" style="height: 100vh;overflow-y: auto;" >
    <p class="pt15 fbold fs18 c38 pl15 pr27 bgfff">{{title}}</p>
    <div class="px15 dec">
      <div class="left-dec">
        <span>
          {{companyName}}
        </span>
        <span style="margin-left: 20upx;">
          {{time}}
        </span>
      </div>
      <view class="right-dec"
            @click="addTypeShow = true">
        编辑
      </view>
    </div>

    <div class="centent">
      <div class="bgfff pt20 pl15 pr15 pb10" v-if="webViewSrc == ''">
        <img :src="v"
             alt=""
             v-for="(v,k) in photos"
             mode="widthFix"
             :key="k"
             class="w100p">
      </div>
        <rich-text :nodes='details'></rich-text>
    </div>
    <SelectorOne v-if="addTypeShow"
                 :status="addTypeShow"
                 :allClass="addTypes"
                 @closeModal="addTypeShow = !addTypeShow"
                 @choose_tap="choose_tap">
    </SelectorOne>
    <!-- <div class="bgfff pt20 pl15 pr15 pb10 main-box" v-else>
        <button class="more-btn"
                @click="goPage">
          点击查看更多
        </button>
    </div>
    -->
    <!-- 分享弹窗 -->
    <!--     <cover-view class="w100p h100p prod_choose_class borderbox disflex column-reverse"
      :class="isShowShare ? 'show' : '' "
      @click.stop="isShowShare = false">
      <cover-view class="bgfff inner textc lh44">
        <cover-view class="share-box">
           <button style="margin-right: 136.5upx;margin-left: 0;background: #fff;" open-type="share">
            <cover-image class="share-img" src="https://myy-one-stand.oss-cn-beijing.aliyuncs.com/yimai_photos/crm/weixin_share.png"></cover-image>
            <cover-view class="share-title">微信好友</cover-view>
           </button>
           <cover-view style="margin-left: 136.5upx;">
            <cover-image class="share-img" src="https://myy-one-stand.oss-cn-beijing.aliyuncs.com/yimai_photos/crm/weixin_share2.png"></cover-image>
            <cover-view class="share-title">名片海报</cover-view>
           </cover-view>
        </cover-view>
        <cover-view class="share-ornament"></cover-view>
        <cover-view class="fs16 c38 lh44"  @click.stop="isShowShare = false">
            取消
        </cover-view>
      </cover-view>
    </cover-view> -->

    <div class="share-btn" @click="confirm">立即分享</div>
    <div class="mask" v-if="maskShow" @click="mask_tag">
      <div class="mask-box" @click.stop="mask_tag_stop">
        <div class="mask-box-top">
           <image class="" :src="styleImg"></image>
           <p class="mb10">进入客服会话，</p>
           <p>回复“1”即可获取并分享文章</p>
        </div>
        <div class="mask-box-bottom">
           <div class="mask-cancel ca8" @click="mask_cancel">取消</div>
           <!-- <button class="mask-confirm bgblue cfff">立即进入</div> -->
           <button open-type="contact" @contact="contact_tag" class="mask-confirm bgblue cfff">立即进入</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WXAJAX from '@/utils/request';
import BottomButtonSmall from '@/components/bottom_button_small';
import SelectorOne from "@/components/selectorOne";
import util from '@/utils/index';

const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
const isUrl = path => reg.test(path);

export default {
  components: { BottomButtonSmall, SelectorOne },
  data() {
    return {
      webViewSrc: '',
      dynamicId: 98,

      addTypeShow: false,
      addTypes: [
        { name: "删除", id: "delete" },
        { name: "取消", id: "cancel" }
      ],
      styleImg: WXAJAX.imgBackUrl  + '/marketing/img_IM%402x.png',
      title: '',
      companyName: '',
      time: '',
      details: '',
      photos: [],

      isShowShare: true,
      maskShow:false,
      userId:wx.getStorageSync('userId'),
      companyId:wx.getStorageSync('COMPANYID'),
      contact:''
    }
  },
  watch:{
    contact(newVal,old){
      if(this.contact == 1){
        wx.redirectTo({
          url:'../companyPack/shareRecord/main'
        })
      }
    }
  },
  onShareAppMessage() {
    return {
      title: this.title,
      path: `pages/dynamicDetail/main?dynamicId=${this.dynamicId}`,
      success: () => {
        uni.showToast({
          title: '分享成功',
          icon: 'none'
        })
      }
    }
  },
  async onLoad() {
    this.dynamicId = this.$root.$mp.query.id
    const result = await this.getInits()
    console.log(result)
    if (isUrl(result.details)) {
      this.webViewSrc = result.details
    } else {

      let content = result.details;
      this.details = this.formatRichText(content)
    }
    this.title = result.title || ''
    this.companyName = result.originAuthor
    this.time = this.getDateConversion(result.createTime)
    this.time = util.getdate(result.createTime, 'dateTime')
    this.photos = result.photos.split(',')
  },
  methods: {
    getInits() {
      return WXAJAX.POST({
        dynamicId: this.dynamicId,
      }, '', '/company/getDynamicDetail')
    },
    //  删除
    choose_tap(id) {
      if (id === 'cancel') {
        this.addTypeShow = false;
        return;
      }
      wx.showLoading();

      WXAJAX.POST({
        dynamicId: this.dynamicId,
      }, '', '/company/delDynamicInfo').then((data) => {
        wx.hideLoading();
        wx.showToast({
          title: '成功！',
          icon: 'success'
        });
        setTimeout(function () {
          wx.navigateBack();
        }, 600);
      }).catch((err) => {
        console.log(err);
        wx.hideLoading();
      });
    },
    getAddShareRecordData(){
      WXAJAX.POST({
        companyId:this.companyId,
        dynamicId: this.dynamicId,
        userId:this.userId,
        type:1
      }, '', '/customerEssay/addShareRecordData')
      .then((data) => {
        wx.hideLoading();

      }).catch((err) => {
        console.log(err);
        wx.hideLoading();
      });
    },
    mask_tag(){
      this.maskShow = false
    },
    mask_cancel(){
      this.maskShow = false
    },
    confirm(){
       this.maskShow = true
       this.getAddShareRecordData()
    },
    formatRichText(html){
      let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
          match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
          match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
          match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
          return match;
      });
      newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
          match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
          return match;
      });
      newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
      return newContent;
    },
    goPage() {
      uni.navigateTo({
        url: `./webView?url=${this.webViewSrc}`
      })
    },
    contact_tag(){
      this.contact = 1
    },
    //解决ios时间格式兼容问题
    getDateConversion (time) {
       console.log(time)
      // 页面解析过程中,先解析得到DOM,但尚未获取数据,所以dom中的formate解析的值为undefined.
      // 需要在解析的开始时,进行判断:数据接口获取的time时间格式为字符串,所以time的类型作为条件来判断
      if (typeof time !== 'string') {
        return ' ' // 如果不符合条件,则返回空
      }
      let time1 = new Date(time.replace(/-/g, '/').replace('T', ' ')).toISOString() // 转为国际标准化时间
      let time2 = time1.split('T')[0]
      let time3 = time2.replace('-', '/')
      let time4 = time3.replace('-', '/')
      return time4
    }
  }
}
</script>
<style scoped>
page {
  width: 100%;
  background: #fff !important;
}
.ariticle-detail{
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  width: 750upx;
}
.dec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30upx;
  padding-bottom: 40upx;
  border-bottom: 1upx solid #e8e8e8;
}
.left-dec {
  font-size: 24upx;
  color: #a8a8a8;
}
.main-box {
  background-image: url('https://myy-one-stand.oss-cn-beijing.aliyuncs.com/yimai_photos/user/detail_img.png');
  background-size:cover;
  background-position: center center;
  height: 100vh;
}
.right-dec {
  font-size: 24upx;
  color: rgba(86, 108, 132, 1);
  z-index: 1000;
}
.prod_choose_class {
  position: fixed;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  bottom: -100%;
  transition: 0.2s;
}
.more-btn {
  margin-top: 80upx;
  width: 240upx;
  border: 1upx solid rgba(81, 203, 205, 1);
  border-radius: 10upx;
  color: rgba(81, 203, 205, 1);
  font-size: 28upx;
}
.prod_choose_class.show {
  bottom: 0;
}

.prod_choose_class .inner {
  border-radius: 10upx 10upx 0 0;
}
.share-box {
  display: flex;
  justify-content: center;
  margin-top: 20upx;
  margin-bottom: 30upx;
}
.share-img {
  width: 100upx;
  height: 100upx;
}
.share-title {
  font-size: 24upx;
  color: #a8a8a8;
  /* line-height:14upx; */
}
.centent{
  flex: 1;
  overflow: auto;
  width: 100%;
}
.centent image{

}
.centent img{
  max-width: 690upx;
}
.share-btn{
  width: 100%;
  height: 98upx;
  background: linear-gradient(to right, #76dad9, #51cdcc);
  color: #FFFFFF;
  font-size: 36upx;
  text-align: center;
  line-height: 98upx;
}
.mask{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.mask-box{
  width: 580upx;
  background: #FFFFFF;
  border-radius: 10upx;
}
.mask-box-top{
  box-sizing: border-box;
  width: 100%;
  height: 465upx;
  padding: 50upx 50upx 0 50upx;
  text-align: center;
  color:#787878;
}
.mask-box-top image{
  height: 258upx;
  width: 480upx;
  margin-bottom: 27upx;
}
.mask-box-bottom{
  display: flex;
}
.mask-cancel{
  width: 50%;
  height: 100%;
  font-size: 36upx;
  text-align: center;
  line-height: 88upx;
  border-bottom-left-radius: 10upx;
  border-top:1upx solid #D6D6D7;
}
.mask-confirm{
  width: 50%;
  height: 100%;
  font-size: 36upx;
  text-align: center;
  border-bottom-right-radius: 10upx;
}
.end-task{
    height:88upx;
    border-radius: 10upx;
    text-align: center;
    line-height: 88upx;
    font-size: 36upx;
    color: #FFFFFF;
    background:linear-gradient(90deg,#41DDA1,#2BCF88)
  }
rich-text{
  width: 750upx;
  overflow: hidden;
}

</style>
